<template>
  <div id="part3">
    <h1>重构</h1>
    <p>
      <span>数量</span>
      <button @click="count++">加一</button>
      <input type="number" name="count" v-model="count" />
      <button @click="count--">减一</button>
    </p>
    <p>
      <span>单价</span>
      <button @click="price++">加一</button>
      <input type="number" name="price" v-model="price" />
      <button @click="price--">减一</button>
    </p>
    <p>{{totalNum}}</p>
    <p>总价格{{totalNum.count*totalNum.price}}</p>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('part3')

export default {
  name: "part2",
  components: {},
  data() {
    return {
      count: 0,
      price: 0
    };
  },
  watch: {
    count(num) {
      console.log("count", num);
      this.$store.commit("changeCount", num);
    },
    price(num) {
      this.$store.commit("changePrice", num);
    }
  },
  computed: {
  }
};
</script>
<style scoped>
</style>